<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
   	<title>凯盛项目管理系统</title>
	<link rel="stylesheet" href="css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/datepicker.css">
  </head>
  
  <body>
  	<%@ include file="top.jsp" %>
    <div class="container" style="margin-top:60px">
		<div class="row">
			<div class="span9">
				<form class="form-horizontal" action="task.jspx?m=editTask" method="post" id="myform">
				<fieldset>
					<legend>编辑任务</legend>
					<div class="control-group">
						<label class="control-label">任务名称</label>				
						<div class="controls">
							<input type="text" class="span5" name="name" id="name" value="${task.name }" style="height:28px">
							<span style="color:red" id="name-msg"></span><br/>
							<p class="help-block">In addition to text, any HTML5 text-based input appears like so.</p>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">开始时间</label>
						<div class="controls">       
							<input type="text" id="datepicker" value="${task.begintime }" class="span5" name="begintime" style="height:28px">
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="input01">截止时间</label>
						<div class="controls">       
							<input type="text" id="date" value="${task.deadtime }"class="span5" name="deadtime" style="height:28px">
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" >任务描述</label>
						<div class="controls">       
							<textarea class="span5" name ="cont" rows="8">${task.cont }</textarea>
						</div>
					</div>
					<div class="control-group">
						<label for="" class="control-label">状态</label>
						<div class="controls">
							<select id="multiSelect" name="state" >
								<option value="${task.state }">新任务</option>
								<option>进行中</option>
								<option>已完成</option>
							</select>
						</div>					
					</div>
					<div class="control-group">
						<label class="control-label">级别</label>
						<div class="controls">
							<select id="multiSelect" name="level">
								<option >重要紧急</option>
								<option>重要不紧急</option>
								<option>紧急不重要</option>
								<option>不重要不紧急</option>
							</select>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">负责人</label>
						<div class="controls">
							<select name="manager" style="width:200px;height:28px">
								<!-- memberlist该项目的成员集合 -->
								<c:forEach items="${sessionScope.memeberlist}" var="m">
									<option value="${m.id}">${m.username}</option>
								</c:forEach>								
							</select>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">当前进度</label>
						<div class="controls">       
							<input type="text" class="span5" name="rate" id="rate" value="${task.rate }" style="height:28px">
							<span style="color:red" id="rate-msg"></span><br/>
						</div>
					</div>
					<input type="hidden" name="id" value="${task.id }"/>
					<div class="form-actions">
						<button type="button" id="btnSubmit" class="btn btn-primary">保存</button>
                        <a class="btn" href="task.jspx">返回</a>
					</div>
				</fieldset>
				</form>
			</div>						
		</div>
	</div>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap-datepicker.js"></script>
	
	<script type="text/javascript">
		$(document).ready(function(){
			//日期控件			
			$("#datepicker").datepicker({
				//设置日期格式
				format:'mm-dd-yyyy'
			});
			$("#date").datepicker({
				format:'mm-dd-yyyy'
			});
		});
		
		function validateName() {
			var name = document.getElementById("name").value;
			if(name.trim().length == 0) {
				return false;
			}
			return true;
		}		
		document.getElementById("name").onblur = function(){
			var result = validateName();
			if(!result) {
				document.getElementById("name-msg").innerHTML = "×任务名不能为空";
			}
		};
		//当获得焦点，提示信息消失
		document.getElementById("name").onkeyup = function () {
			document.getElementById("name-msg").innerHTML = "";
		};
		
		function validateRate() {
			var rate = document.getElementById("rate").value;
			if(isNaN(rate) || rate.trim().length == 0) {
			//isNaN()如果是数字返回false
				return false;
			}
			return true;
		}		
		document.getElementById("rate").onblur = function () {
			var result = validateRate();
			if(!result) {
				document.getElementById("rate-msg").innerHTML = "×必须填写数字";
			}
		};
		//当获得焦点，提示信息消失
		document.getElementById("rate").onkeyup = function () {
			document.getElementById("rate-msg").innerHTML = "";
		};
		
		document.getElementById("btnSubmit").onclick = function() {
			if(validateName() && validateRate()) {
				document.getElementById("myform").submit();
			} else {
				document.getElementById("myform").button();
			}
		};
	</script>
  </body>
</html>
